<template>
  <!-- 登录注册页面 -->

  <div class="container">
    <!-- 登录和注册栏目 -->
    <el-row type="flex" justify="center" align="middle" class="main">
      <div class="form-wrapper">
        <!-- 表单头部 -->
        <el-row type="flex" justify="center" class="tabs">
          <span
            v-for="(item,index) in ['登录','注册']"
            :key="index"
            :class="{active:currentTab==index}"
            @click="hanleChangeTab(index)"
          >{{item}}</span>
        </el-row>
        <!-- 登录组件 -->
        <loginPage v-if="currentTab==0" />
        <!-- 注册组件 -->
        <registerPage @cut="currentTab=0" v-if="currentTab==1" />
      </div>
    </el-row>
  </div>
</template>


<script>
//1.引入登录组件
import loginPage from "@/components/user/loginPage";
//2.引入注册组件
import registerPage from "@/components/user/registerPage";
export default {
  //注册主件
  components: {
    loginPage,
    registerPage
  },
  //数据
  data() {
    return {
      //当前选项
      currentTab: 0
    };
  },
  //方法
  methods: {
    hanleChangeTab(index) {
      //修改当前data数据里面的当前选项
      this.currentTab = index;
    }
  }
};
</script>
<style lang="less" scoped>
//页面容器
.container {
  background: url("http://157.122.54.189:9095/assets/images/th03.jfif") center 0;
  height: 700px;
  min-width: 1000px;
  //入口
  .main {
    position: relative;
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    //elm表单
    .form-wrapper {
      width: 500px;
      margin: 0 auto;
      background: #fff;
      box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
      overflow: hidden;
      //表单头部
      .tabs {
        span {
          display: inline-block;
          width: 50%;
          height: 50px;
          line-height: 48px;
          box-sizing: border-box;
          border-top: 2px solid #eee;
          text-align: center;
          cursor: pointer;
          color: #666;
        }
        .active {
          color: orange;
          border-top-color: orange;
          background: #eee;
          font-weight: 700;
        }
      }
    }
  }
}
</style>